# 浏览器的缓存机制

# 为什么要缓存机制

• 浏览器 -> 网站 -> 加载出页面 （网络请求，CPU计算，页面渲染）
• 减少网络请求体积和数量

# 强缓存

• 浏览器在第一次请求的时候, 会直接下载资源, 缓存到本地, 第二次请求的时候直接使用缓存

# 协商缓存

• 第一次请求: 浏览器发送请求，服务器返回资源和资源标识Last-Modified / ETag

• 后续请求：浏览器发送请求和资源标识If-Modified-Since / If-None-Match

      如果不是最新资源，服务器返回200状态码、最新资源和新的资源标识
      如果是最新资源，服务器返回304状态码，直接从缓存中获取资源
  

• 相关设置(服务端告诉客户端)

  • Expires (什么时候会过期)
    • 必须保证服务端和客户端时间严格同步
  • Cache-control: max-age (多少时间后会过期)
    • 解决了服务端和客户端时间必须同步的问题
  • If-None-Match/ETag (缓存标识)
    • 第一次请求时,服务端返回该标识给客户端, 客户端在第二次请求时会带上该标识与服务端进行对比
  • 资源标识 Last-Modified/If-Modified-Since
    • 第一次请求时服务端返回Last-modified: 资源上次的修改时间
    • 第二次请求时客户端带上请求头If-Modified-Since: 资源上次的修改时间
  • 资源标识 ETag
    • 资源的唯一字符串